<template>
<div class="app-menu-list">
  <ul>
    <li v-for="menuGroup in menus" :key="menuGroup.name">
      <div class="app-menu-group-name">
        <span>{{menuGroup.name}}</span>
      </div>
      <ul>
        <li v-for="menu in menuGroup.children" :key="menu.title" @click="handleClickMenu(menu)" :class="{'app-menu-active':currentPath === menu.page}">
          <div class="app-menu-name">
            <span>{{menu.name}}</span>
            <span>{{menu.title}}</span>
          </div>
        </li>
      </ul>
    </li>
  </ul>
</div>
</template>

<script lang="ts">
import {
  injectAppNavigator
} from "../navigator/app-navigator";
import {
  AppMenu,
  MENUS
} from "./menus";

export default {
  name: "app-menu",
  props: {
    currentPath: {
      type: String
    },
  },
  setup() {
    const navigator = injectAppNavigator()

    return {
      menus: MENUS,
      handleClickMenu(menu: AppMenu) {
        navigator.methods.go(menu.page)
      },
    }
  },
}
</script>

<style lang="scss">
.app-menu-list {
  height: 100%;
  overflow: auto;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    .app-menu-name,
    .app-menu-group-name {
      font-size: 14px;
      padding: 10px 24px 12px 32px;
      white-space: nowrap;
      color: #333;
      cursor: pointer;
      transition: all 300ms linear;

      &:hover {
        background-color: rgba(#42b983, 0.1);
        color: #42b983;
      }
    }

    .app-menu-name {
      position: relative;

      &>span {
        &:nth-child(2) {
          font-size: 12px;
          margin-left: 0.5em;
          color: #ccc;
        }
      }

      .pl-icon {
        position: absolute;
        right: 16px;
        line-height: 40px;
      }
    }

    .app-menu-group-name {
      padding-left: 24px;
      letter-spacing: 1px;
      font-size: 12px;
      font-weight: 600;
      color: #42b983;
    }
  }

  &:after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -30px;
    width: 30px;
    content: '';
    box-shadow: inset 10px 0 8px -8px #f0f1f2;
  }
}
</style>
